<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>历史文章</title>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>

    </style>
</head>

<body style="background-color: #FAFAFA">

<div class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('历史评论')"></div>

            <!--            内容-->
            <div class="layui-row layui-col-space10" style="margin-top: 60px;font-size: 16px;">
                <!--                评论-->
                <div id="comments" th:if="${uacs.size() != 0}" class="ui comments">

                    <div class="comment" th:each="uac, iterStat:${#request.getAttribute('uacs')}"
                         th:value="${uac.commentId}"
                         style="margin-bottom: 40px">
                        <a class="avatar">
                            <img th:src="${uac.img}">
                        </a>
                        <div class="content">
                            <a class="author" th:href="@{/user/info/{id}(id=${uac.userId})}"
                               th:text="${uac.username}"></a>
                            <div class="metadata">
                                <span class="date" th:text="${uac.time}"></span>
                                <a class="ui link" th:href="${'/topic/' + uac.topicId}">From</a>
                            </div>
                            <div class="text" th:text="${uac.content}"></div>
                            <div class="actions">
                                <!--                                th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"-->
                                <a th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"
                                   v-on:click="deleteComment($event)"
                                   th:value="${uac.commentId}" class="delete">
                                    <i class="ui red delete icon"></i>Delete
                                </a>

                                <a th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"
                                   class="edit">
                                    <i class="yellow edit icon"></i> Edit
                                </a>
                            </div>
                        </div>
                    </div>


                    <!--                评论提示-->
                    <div th:if="${#request.getAttribute('uacs').size() == 0}">
                        <div class="ui icon message">
                            <i class="green check icon"></i>
                            <div class="content">
                                <div class="header">提示</div>
                                <p>没有发表过评论……</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<div th:insert="index.html::pageTail"></div>

</body>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/my.js}"></script>
<script type="application/javascript">

    $(".delete").click(function () {
        layer.open({
            title: '提示'
            , content: '您确定要删除这个评论吗？'
            , yes: function (index, layero) {

                var commentId = document.getElementById('comments').childNodes[index].getAttribute('value')
                var requestData = {
                    id: commentId
                }
                console.log(index)
                console.log(commentId)
                axios.post('/comment/delete', requestData).then(res => {
                    if (res.data == '1') {
                        layer.open({
                            title: '提示',
                            content: '删除成功',
                            yes: function (index, layero) {
                                location.reload()
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            }
                        });
                    }

                })
                layer.close(index);
            }
        });
    });

    $(".edit").click(function () {
        layer.open({
            title: '提示'
            , content: '是否要编辑这个评论？'
            , yes: function (index, layero) {
                var commentId = $('#comments').children().eq(index - 1).attr('value');
                console.log(commentId)
                location.href = '/comment/edit/' + commentId;
            }
        });
    });

</script>

</html>
